<template>
    <a-spin :spinning="confirmLoading">
        <a-tabs v-model="activeKey">
            <a-tab-pane tab="对外分发任务" :key="refKeys[0]" :forceRender="true" :class="'jeecg-tabs-top'" :animated="false">
                <j-form-container :disabled="formDisabled">
                    <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                        <a-row>
                            <a-col :span="8">
                                <a-form-model-item label="任务名" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="taskName">
                                    <a-input v-model="model.taskName" placeholder="请输入任务名"
                                             :disabled="model.id!=''"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item label="任务描述" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="taskDesc">
                                    <a-input v-model="model.taskDesc" placeholder="请输入任务描述"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item label="实体类" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="paramBean">
                                    <a-input v-model="model.paramBean" placeholder="请输入实体类"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-model-item label="数据格式" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="dataType">
                                    <j-dict-select-tag type="list" v-model="model.dataType"
                                                       dictCode="msi_server_data_type"
                                                       placeholder="请选择数据格式"/>
                                </a-form-model-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-model-item label="测试入参" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
                                                   prop="testRequest">
                                    <a-textarea v-model="model.testRequest" rows="6" placeholder="请输入测试入参"/>
                                </a-form-model-item>
                            </a-col>
                            <!--<a-col :span="12">
                                <a-form-model-item label="测试出参" :labelCol="labelCol2" :wrapperCol="wrapperCol2"
                                                   prop="testResponse">
                                    <a-textarea v-model="model.testResponse" rows="4" placeholder="请输入测试出参"/>
                                </a-form-model-item>
                            </a-col>-->
                        </a-row>
                    </a-form-model>
                </j-form-container>
            </a-tab-pane>
            <a-tab-pane tab="外部服务接口管理" :key="refKeys[1]" :forceRender="true">
                <!--                <msi-exo-task-server-list ref="subList"></msi-exo-task-server-list>-->
               <!-- <div class="table-operator">
                    <a-button @click="handleAdd" type="primary" icon="plus">添加接口</a-button>
                </div>-->
                <div>
                    <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
                        selectedRowKeys.length }}</a>项
                        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
                    </div>

                    <a-table
                            ref="table"
                            size="middle"
                            :scroll="{x:true}"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :pagination="false"
                            :loading="loading"
                            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                            class="j-table-force-nowrap"
                            @change="handleTableChange">
                        <template slot="ellipsisText" slot-scope="text">
                            <j-ellipsis :value="text" :length="30"></j-ellipsis>
                        </template>
                        <span slot="action" slot-scope="text, record">
                          <a-menu-item>
                              <a @click="handleDetail(record)">详情</a>
                          </a-menu-item>
                            <!--<a-divider type="vertical"/>
                            <a-dropdown>
                              <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
                              <a-menu slot="overlay">
                                  <a-menu-item>
                                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                                      <a>删除</a>
                                    </a-popconfirm>
                                  </a-menu-item>
                              </a-menu>
                            </a-dropdown>-->
                        </span>

                    </a-table>
                </div>
            </a-tab-pane>
        </a-tabs>


<!--        <msi-exo-server-list-pop ref="exoServerPop" @ok="exoServerPopOk"></msi-exo-server-list-pop>
        <msi-exo-server-ws-modal ref="exoServerWs"></msi-exo-server-ws-modal>
        <msi-exo-server-rest-modal ref="exoServerRest"></msi-exo-server-rest-modal>-->
    </a-spin>
</template>

<script>

    import { httpAction, getAction } from '@/api/manage'
    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixinNone } from '@/mixins/JeecgListMixinNone'

/*    import MsiExoServerListPop from '../plugins/MsiExoServerListPop'
    import MsiExoServerWsModal from './MsiExoServerWsModal'
    import MsiExoServerRestModal from './MsiExoServerRestModal'*/
    // import MsiExoTaskServerList from '../subTables/MsiExoTaskServerList'

    export default {
        name: 'MsiExoTaskForm',
        mixins: [JeecgListMixinNone, mixinDevice],
        components: {
            // MsiExoServerListPop, MsiExoServerWsModal, MsiExoServerRestModal
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                model: {},
                refKeys: ['msiExoTask', 'msiExoServer',],
                tableKeys: ['msiExoServer',],
                activeKey: 'msiExoTask',

                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                labelCol2: {
                    xs: { span: 24 },
                    sm: { span: 3 },
                },
                wrapperCol2: {
                    xs: { span: 24 },
                    sm: { span: 18 },
                },
                confirmLoading: false,
                validatorRules: {
                    taskName: [
                        { required: true, message: '请输入任务名!' },
                    ],
                    taskDesc: [
                        { required: true, message: '请输入任务描述!' },
                    ],
                    paramBean: [
                        { required: true, message: '请输入外实体类!' },
                    ],
                    dataType: [
                        { required: true, message: '请输入数据格式!' },
                    ],

                    restUrl: [
                        { required: true, message: '请输入URL!' },
                    ],

                },
                columns: [
                    {
                        title: '#',
                        dataIndex: '',
                        key: 'rowIndex',
                        width: 60,
                        align: 'center',
                        customRender: function (t, r, index) {
                            return parseInt(index) + 1
                        }
                    },
                    {
                        title: '接口类型',
                        align: 'center',
                        width: 120,
                        dataIndex: 'exoServerType'
                    },
                    {
                        title: '服务接口',
                        align: 'center',
                        width: 240,
                        dataIndex: 'exoServerCode'
                    },
                    {
                        title: '服务接口描述',
                        align: 'center',
                        dataIndex: 'exoServerDesc',
                        scopedSlots: { customRender: 'ellipsisText' }
                    },
                    /*{
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        fixed: 'right',
                        width: 147,
                        scopedSlots: { customRender: 'action' }
                    }*/
                ],

                url: {
                    add: '/msibase/msiExoTask/add',
                    addTaskServer: '/msibase/msiExoTask/addTaskServer',
                    edit: '/msibase/msiExoTask/edit',
                    test: '/msibase/msiExoTask/exoTaskTest',
                    list: '/msibase/msiExoServer/listByTaskId',
                }
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        created() {
            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model))
        },
        methods: {
            add() {
                this.edit(this.modelDefault)
            },
            edit(record) {
                this.model = Object.assign({}, record)
                if (this.model.id) {
                    // this.$refs.subList.taskId = this.model.id
                    // this.$refs.subList.queryParam.taskId = this.model.id
                    // this.$refs.subList.loadData()
                    this.queryParam.taskId = this.model.id
                    this.loadData()
                }
                this.visible = true
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            showExoSystemPop() {
                this.$refs.exoSystemPop.title = '外围系统服务选择'
                this.$refs.exoSystemPop.hide()
            },
            exoServerPopOk(rows) {
                let row = rows[0]
                let param = { taskId: this.model.id, serverId: row.id }
                console.log(param)
                /*this.model = Object.assign({}, this.model, {
                    exoSystemId: row.id,
                    exoSystemCode: row.exoSystemCode,
                    exoSystemName: row.exoSystemName,
                    orgCode: row.orgCode,
                    orgName: row.orgName,
                })*/
            },
            test() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = this.url.test
                        let method = 'post'
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
            handleAdd() {
                if (!this.model.id) {
                    this.$message.warning('请先保存任务表单,再关联接口!')
                    return false
                } else {
                    this.$refs.exoServerPop.hide()
                }
            },
            handleDetail(record) {
                if (record.exoServerType == 'WS') {
                    this.$refs.exoServerWs.edit(record)
                    this.$refs.exoServerWs.title = 'WebService接口详情'
                    this.$refs.exoServerWs.disableSubmit = true
                } else if (record.exoServerType == 'REST') {
                    this.$refs.exoServerRest.edit(record)
                    this.$refs.exoServerRest.title = 'RESTFul接口详情'
                    this.$refs.exoServerRest.disableSubmit = true
                }

            },

        }
    }
</script>
